<script setup lang="ts">
import { onMounted, ref } from "vue";
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/css";
import "swiper/css/pagination";
import SwiperCore, { Pagination, EffectCreative } from "swiper";
//引入自定义模块
import Page1 from "./page1.vue";
import Page2 from "./page2.vue";

SwiperCore.use([EffectCreative, Pagination]);
const count = ref(0);
onMounted(() => {});
</script>

<template>
  <swiper
    :pagination="{
      clickable: true,
    }"
    class="mySwiper"
    :grabCursor="true"
    :effect="'creative'"
    :creativeEffect="{
      prev: {
        shadow: true,
        translate: ['-120%', 0, -500],
      },
      next: {
        shadow: true,
        translate: ['120%', 0, -500],
      },
    }"
    :speed="600"
    :parallax="true"
  >
    <swiper-slide> <Page1 /> </swiper-slide>
    <swiper-slide> <Page2 /> </swiper-slide>
  </swiper>
</template>

<style scoped>
.swiper {
  width: 100%;
  height: 100vh;
  background-color: rgb(242, 242, 242);
}

.swiper-slide {
  font-size: 18px;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  color: #000;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>
